<template>
  <div>
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
    <i class="el-icon-edit"></i>
    <i class="el-icon-share"></i>
    <i class="el-icon-delete"></i>

    <div>
      <el-table
        :data="shoplists"
        style="width: 500px"
        v-loading="loading"
        :row-class-name="fn"
        @row-click="trcli"
      >
        <el-table-column prop="id" label="编号" width="180"  />
        <el-table-column prop="name" label="商品名称" width="180" />
        <el-table-column prop="price" label="商品价格" />
      </el-table>
    </div>
    <span class="icon iconfont icon-qitalaji-chongwufenbian"></span>
    <span class="icon iconfont icon-kehuishouwu-zhiwulei"></span>
    <span class="icon iconfont icon-chuyulaji-guopi"></span>
    <span class="icon iconfont icon-chuyulaji-shengcaishengfan"></span>
    <span class="icon iconfont icon-kehuishouwu-jinshulei"></span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shoplists: [],
      loading: false,
      chooseid:1001
    }
  },
  mounted() {
    this.loading = true
    setTimeout(() => {
      this.shoplists = [
        { "id": 1001, "name": "衬衫", "price": 200 },
        { "id": 1002, "name": "帽子", "price": 100 },
        { "id": 1003, "name": "眼镜", "price": 200 },
        { "id": 1004, "name": "冲锋衣", "price": 220 },
        { "id": 1005, "name": "休闲裤", "price": 100 }
      ]
      this.loading = false
    }, 1000)
  },
  methods: {
    fn(obj) {
      if (obj.row.id==this.chooseid) {
        return "active"
      }
    },
    trcli(obj) {
      this.chooseid=obj.id
    }
  }
}
</script>


<style>
.active{
  color: white;
  background-color: skyblue;
}
</style>
